<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <head th:replace="fragments :: html_head('Product form','tag')"></head>
    <link rel="stylesheet" th:href="@{/richtext/richtext.min.css}" />
    <script th:src="@{/richtext/jquery.richtext.min.js}"></script>
    <script th:src="@{/richtext/placeholderTypewriter.js}"></script>
  </head>

  <body>
    <div th:replace="header :: header">Header</div>

    <div>
      <div class="custom-form" th:object="${product}">
        <div class="row">
          <div th:if="${!editMode}" class="col-md-3 custom-form-left">
            <img
              th:src="@{/images/default-product.png}"
              style="color: white"
              alt=""
            />
            <h3>Create a new category</h3>
            <a th:href="@{/categories/new}" class="btn btn-light m-5"
              >New Category</a
            >
            <h3>Create a new brand</h3>
            <a th:href="@{/brands/new}" class="btn btn-light m-5">New Brand</a>
          </div>
          <div th:if="${editMode}" class="col-md-3 custom-form-left">
            <img
              id="thumbnail"
              th:src="@{${product.getMainImagePath}}"
              alt=""
            />
            <h3>[[${product.name}]]</h3>
            <h5>[[${product.getDate}]]</h5>
          </div>
          <div class="col-md-9 custom-form-right">
            <h3 class="custom-form-heading">[[${pageTitle}]]</h3>
            <!-- Error Message  -->
            <div th:if="${message != null}" class="warning">[[${message}]]</div>
            <form
              th:action="@{/products/save}"
              th:object="${product}"
              enctype="multipart/form-data"
              method="post"
              class="row custom-form-tabs"
              onsubmit="return checkUniqueness(this, moduleURL, 'Product')"
            >
              <input type="hidden" th:field="*{id}" />
              <input
                th:if="${product.category != null}"
                type="hidden"
                id="categoryId"
                th:value="${product.category.id}"
              />
              <div class="custom-form-nav-tabs">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link active"
                      data-toggle="tab"
                      href="#overview"
                      role="tab"
                    >
                      Overview
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link"
                      data-toggle="tab"
                      href="#fullDescription"
                      role="tab"
                    >
                      Description
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link"
                      data-toggle="tab"
                      href="#images"
                      role="tab"
                    >
                      Images
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link"
                      data-toggle="tab"
                      href="#details"
                      role="tab"
                    >
                      Details
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link"
                      data-toggle="tab"
                      href="#shipping"
                      role="tab"
                    >
                      Shipping
                    </button>
                  </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                  <div
                    class="tab-pane active p-3"
                    id="overview"
                    role="tabpanel"
                  >
                    <div th:replace="products/product_overview :: content">
                      Product Overview
                    </div>
                  </div>
                  <div
                    class="tab-pane p-3"
                    id="fullDescription"
                    role="tabpanel"
                  >
                    <th:block sec:authorize="hasAuthority('Sales')">
                      <div
                        th:replace="products/product_description_readonly :: content"
                      >
                        Product Description Read Only
                      </div>
                    </th:block>
                    <th:block
                      sec:authorize="hasAnyAuthority('Admin', 'Editor')"
                    >
                      <div th:replace="products/product_description :: content">
                        Product Description
                      </div>
                    </th:block>
                  </div>
                  <div class="tab-pane p-3" id="images" role="tabpanel">
                    <th:block sec:authorize="hasAuthority('Sales')">
                      <div
                        th:replace="products/product_images_readonly :: content"
                      >
                        Product Images Read Only
                      </div>
                    </th:block>
                    <th:block
                      sec:authorize="hasAnyAuthority('Admin', 'Editor')"
                    >
                      <div th:replace="products/product_images :: content">
                        Product Images
                      </div>
                    </th:block>
                  </div>
                  <div class="tab-pane p-3" id="details" role="tabpanel">
                    <th:block sec:authorize="hasAuthority('Sales')">
                      <div
                        th:replace="products/product_details_readonly :: content"
                      >
                        Product Details Read Only
                      </div>
                    </th:block>

                    <th:block
                      sec:authorize="hasAnyAuthority('Admin', 'Editor')"
                    >
                      <div th:replace="products/product_details :: content">
                        Product Details
                      </div>
                      <div>
                        <button
                          class="btn-wise-static"
                          onclick="addDetailSection()"
                          title="Add Detail"
                        >
                          <i class="fas fa-plus-circle fa-3x icon-light"></i>
                        </button>
                      </div>
                    </th:block>
                  </div>
                  <div class="tab-pane p-3" id="shipping" role="tabpanel">
                    <th:block sec:authorize="hasAuthority('Sales')">
                      <div
                        th:replace="products/product_shipping_readonly :: content"
                      >
                        Product Shipping Read Only
                      </div>
                    </th:block>

                    <th:block
                      sec:authorize="hasAnyAuthority('Admin', 'Editor')"
                    >
                      <div th:replace="products/product_shipping :: content">
                        Product Shipping
                      </div>
                    </th:block>
                  </div>
                </div>
                <div class="col-md-3 mx-auto">
                  <input
                    type="submit"
                    class="btn btn-wise btn-wise-sm"
                    th:value="${!editMode} ? Save : Update"
                  />
                  <input
                    type="button"
                    class="btn btn-wise btn-wise-sm"
                    value="Back"
                    id="backButton"
                  />
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>

      <div th:replace="fragments_modal :: modal_dialog">Modal Dialog</div>

      <div th:replace="footer :: footer">Footer</div>
    </div>

    <script type="text/javascript">
      MAX_FILE_SIZE = 1048576; //1mb
      moduleURL = "[[@{/products}]]";
      brandModuleURL = "[[@{/brands}]]";
      defaultImageUrl = "[[@{/images/default-product.png}]]";
    </script>

    <script type="text/javascript" th:src="@{/js/form_functions.js}"></script>

    <script
      type="text/javascript"
      th:src="@{/js/product_form_overview.js}"
    ></script>
    <script
      type="text/javascript"
      th:src="@{/js/product_form_images.js}"
    ></script>
    <script
      type="text/javascript"
      th:src="@{/js/product_form_details.js}"
    ></script>
  </body>
</html>
